<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/jsp/common.jsp"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/admin_content.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.10.2.min.js"></script>
<title>Account Management</title>
</head>

<body>
	<h1>Account Management</h1>
	<div id="options">
		<a id="showList" href="#">&nbsp;&nbsp;&nbsp;Account List&nbsp;&nbsp;&nbsp;</a>
		<a id="showForm" href="#">&nbsp;&nbsp;&nbsp;Add New Account&nbsp;&nbsp;&nbsp;</a>
	</div>
	<br />

	<!-- Table food list -->
	<div id="list">
		<div class="title">Account List</div>
		<div class="content" align="center">
			<table border="1">
				<tr id="tableTitle">
					<th>&nbsp; No.</th>
					<th>&nbsp; Username</th>
					<th>&nbsp; Password</th>
					<th>&nbsp; Role</th>
					<th>&nbsp; Status</th>
					<th>&nbsp; Id</th>
					<th>&nbsp; Action</th>
				</tr>
				<s:iterator value="listAccount" var="account" status="itStatus">
					<tr id="<s:property value="id"/>">
						<td align="center"><s:property value="#itStatus.Count" /></td>
						<td><s:property value="username" /></td>
						<td><s:property value="password" /></td>
						<td style="display: none"><s:property value="role.id" /></td>
						<td><s:property value="role.name" /></td>
						<td style="display: none"><s:property value="active" /></td>
						<s:if test="active==1">
							<td align="center">Actived</td>
						</s:if>
						<s:else>
							<td align="center">Deactived</td>
						</s:else>
						<td align="center"><s:property value="id" /></td>
						<td align="center">
							<a class="operation" href="deleteAccount?account.id=<s:property value="id"/>">&nbsp;Delete&nbsp;</a>&nbsp;-&nbsp;
							<a class="operation" name="edit" id=<s:property value="id"/> href="#">&nbsp;Edit&nbsp;</a>
						</td>
						<td style="display: none"><s:property value="image" /></td>
					</tr>
				</s:iterator>
			</table>
		</div>
	</div>

	<!-- Form add new food -->
	<div id="formAdd">
		<div class="title">Add New Account</div>
		<div class="content" align="center">
			<s:form id="form1" action="addAccount" method="post" validate="true">
				<s:textfield cssClass="textfield" name="account.username" label="Username" size="50" requiredLabel="true" />
				<s:password cssClass="textfield" name="account.password" label="Password"  size="50" requiredLabel="true" />
				<s:select cssClass="textfield" name="account.role.id" label="Role" list="listRole" listKey="id" listValue="name" />
				<s:radio cssClass="textfield" name="account.active" label="Status" list="#{'1':'Active', '0':'Deactive'}" value="1" />
				<s:submit id="button" value="Add" />
			</s:form>
		</div>
	</div>

	<!-- Form edit food -->
	<div id="formEdit">
		<div class="title">Edit Account</div>
		<div class="content" align="center">
			<s:form id="form2" action="editAccount" method="post" validate="true">
				<s:hidden id="idEditTextfield" name="account.id" />
				<s:textfield id="usernameEditTextfield" cssClass="textfield" name="account.username" label="Username" size="50" readonly="true" requiredLabel="true" />
				<s:password id="passwordEditPassword" cssClass="textfield" name="account.password" label="Password" size="50" />
				<s:select id="roleEditSelect" cssClass="textfield" name="account.role.id" label="Role" list="listRole" listKey="id" listValue="name" />
				<s:radio id="statusEditRadio" cssClass="textfield" name="account.active" label="Status" list="#{'1':'Active', '0':'Deactive'}" />
				<s:submit id="button" value="Update" />
			</s:form>
		</div>
	</div>

	<!-- Javascript -->
	<script>
		$(document).ready(function() {
			$("#formEdit").css("display", "none");
			$("#formAdd").css("display", "none");
			$("#showList").css("border-style", "inset");

			$("#showForm").click(function() {
				$(this).css("border-style", "inset");
				$("#showList").css("border-style", "outset");
				$("#list").hide("fast");
				$("#formEdit").hide("fast");
				$("#formAdd").show("fast");
			});

			$("#showList").click(function() {
				$(this).css("border-style", "inset");
				$("#showForm").css("border-style", "outset");
				$("#formAdd").hide("fast");
				$("#formEdit").hide("fast");
				$("#list").show("fast");
			});

			var valueArray = new Array();

			$("a").click(function() {
				if ($(this).attr("name") == "edit") {
					var id = $(this).attr("id");
					$('#' + id + ' td').each(function(index) {
						valueArray[index] = $(this).text();
					});

					$("#idEditTextfield").val(id);
					$("#usernameEditTextfield").val(valueArray[1]);
					$("#passwordEditPassword").val(valueArray[2]);
					$("#roleEditSelect").val(valueArray[3]);
					$("#statusEditRadio" + valueArray[5]).attr('checked', true);
					$("#showList").css("border-style", "outset");
					$("#list").hide("fast");
					$("#formEdit").show("fast");
				}
			});
		});
	</script>
</body>
</html>